<template>
  <div class="about">
    <button @click="handHome">Home</button> <br>
    <button @click="handStoreList">List</button> <br>
    <button @click="handAbout">About</button> <br>
    Home: {{numHome ? numHome : 0}} <br><br>
    List: {{list ? list : 0}} <br><br>
    About: {{count ? count : 0}}
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      num: 88 + 'Home.vue',
      about: {
        age: 23,
        type: 'Auout.vue'
      },
      listData: [{
          name: 'List',
          type: '存储数据'
      }],
    }
  },
  methods: {
    handHome(){
      this.$store.commit('saveHomeNum',this.about)
    },
    handAbout(){
      this.$store.commit("saveAboutCount",520);
      console.log("About-count",this.count);
    },
    handStoreList(){
        this.$store.commit('saveList',this.listData);
    },
  },
  computed:{
    ...mapState({
      numHome: state => state.List.numHome
    }),
    ...mapState({
      list: state => state.List.list
    }),
    ...mapState({
      count: state => state.About.count
    }),
  },
  // computed: mapState((state) =>{
    
  // })
}
</script>

<style>
  button{
    margin-bottom: 1rem;
  }
</style>